<script setup lang="ts">
import { reactive } from 'vue';

interface BranchData {
  branchTitle: string;
  branchBoxTop: string[];
  branchBoxBottom: string[];
}
interface CloudData {
  cloudTitle: string;
  cloudBox: string[];
}

const branchData: BranchData = reactive({
  branchTitle: '分支互联',
  branchBoxTop: [
    '协同办公',
    '移动办公',
    '电话会议',
    '视频会议',
    '数据安防',
    '出海组网',
  ],
  branchBoxBottom: [
    '广域网优化',
    '出海业务加速',
    '网络集中管控',
    '智能网络运维',
    '新业务快速部署',
    '……',
  ],
});
const cloudData: CloudData = reactive({
  cloudTitle: '上云服务',
  cloudBox: ['无缝上云', '多云互联', '应用加速', '访问优化', '……'],
});

const rightList = ['· 连接稳定', '· 合规安全', '· 智能管理', '· 成本可控'];
</script>

<template>
  <div class="sdwan-scene">
    <div class="sdwanBody">
      <div class="title">
        <span class="left">SD-WAN</span>
        <span class="right">企业组网的适用场景</span>
      </div>
      <div class="box">
        <div class="left">
          <div class="circle_1"></div>
          <div class="circle_2"></div>
          <div class="circle_3"></div>
          <div class="small-circle">
            <div class="small-point" v-for="i in 16" :key="i"></div>
          </div>
          <div class="leftBody">
            <div class="branch">
              <div class="branchTitle">{{ branchData.branchTitle }}</div>
              <div class="branchBox">
                <div class="branchBoxTop">
                  <div
                    class="contentBox"
                    v-for="item in branchData.branchBoxTop"
                    :key="item"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="branchBoxBottom">
                  <div
                    class="contentBox"
                    v-for="value in branchData.branchBoxBottom"
                    :key="value"
                  >
                    {{ value }}
                  </div>
                </div>
              </div>
            </div>
            <div class="cloud">
              <div class="cloudTitle">{{ cloudData.cloudTitle }}</div>
              <div class="cloudBox">
                <div
                  class="contentBox"
                  v-for="val in cloudData.cloudBox"
                  :key="val"
                >
                  {{ val }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <ul>
            <li v-for="i in rightList" :key="i">{{ i }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sdwan-scene {
  width: 100%;
  padding-bottom: 150px;
  background: linear-gradient(to right, #f2f6f7, #eef3f8);
  .sdwanBody {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
      margin-bottom: 50px;
      text-align: center;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 4px;
      font-family: 'SourceHanSansCN-Normal';
      white-space: nowrap;
      .right {
        color: #484848;
      }
      .left {
        font-weight: 700;
        /* 定义渐变色背景 */
        background: linear-gradient(to right, #5b9bc7, #3e5898);
        /* 设置背景剪切区域为文本 */
        -webkit-background-clip: text;
        /* 设置文本填充颜色为透明，只显示渐变色背景 */
        -webkit-text-fill-color: transparent;
      }
    }

    .box {
      width: 100%;
      display: flex;
      margin-top: 50px;

      .left {
        position: relative;
        width: 60%;
        height: 536px;
        background-color: #4892fe;
        border-radius: 0px 60px 60px 0px;
        overflow: hidden;
        display: flex;
        justify-content: end;
        .circle_1 {
          position: absolute;
          top: -25%;
          left: -2%;
          width: 250px;
          height: 250px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
        }
        .circle_2 {
          position: absolute;
          top: 15%;
          left: -2%;
          width: 250px;
          height: 250px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
        }
        .circle_3 {
          position: absolute;
          bottom: -25%;
          right: -4%;
          width: 320px;
          height: 320px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.2);
        }
        .small-circle {
          position: absolute;
          bottom: 2%;
          left: 20%;
          width: 80px;
          height: 80px;
          display: flex;
          flex-wrap: wrap;
          .small-point {
            margin: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
          }
        }

        .leftBody {
          display: flex;
          justify-content: space-between;
          width: 624px;
          margin: 50px 100px 0 0;

          .branch {
            width: 430px;
            height: 425px;

            display: flex;
            flex-direction: column;
            .branchTitle {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 60px;
              background-color: #0150b5;
              font-size: 22px;
              letter-spacing: 2px;
              color: #faf7f7;
            }
            .branchBox {
              flex: 1;
              border: 2px dashed #ffffff;
              border-top: 0;
              padding: 5px 5px 0 5px;
              font-size: 18px;
              letter-spacing: 2px;
              color: #020202;
              .branchBoxTop {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .contentBox {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-basis: calc(33.33% - 10px);
                  height: 60px;
                  background-color: rgba(255, 255, 255, 0.8);
                  margin: 5px;
                }
              }
              .branchBoxBottom {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .contentBox {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-basis: calc(50% - 10px);
                  height: 60px;
                  background-color: rgba(255, 255, 255, 0.8);
                  margin: 5px;
                }
              }
            }
          }
          .cloud {
            width: 170px;
            height: 425px;
            display: flex;
            flex-direction: column;
            .cloudTitle {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 60px;
              background-color: #0150b5;
              font-size: 22px;
              letter-spacing: 2px;
              color: #faf7f7;
            }
            .cloudBox {
              flex: 1;
              border: 2px dashed #ffffff;
              border-top: 0;
              display: flex;
              flex-direction: column;
              padding: 7px 10px;
              font-size: 18px;
              letter-spacing: 2px;
              color: #020202;
              .contentBox {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 60px;
                background-color: rgba(255, 255, 255, 0.8);
                margin: 5px 0;
              }
            }
          }
        }
      }

      .right {
        margin-left: 136px;
        margin-top: 50px;
        font-size: 36px;
        line-height: 100px;
        letter-spacing: 4px;
        color: #000000;
      }
    }
  }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
  .sdwanBody {
    .box {
      width: 100%;
      display: flex;
      justify-content: center;
      .left {
        width: 800px !important;
        border-radius: 60px !important;
        align-items: center;
        justify-content: center !important;
        .leftBody {
          margin: 0 !important;
        }
      }
      .right {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .sdwanBody {
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      .left {
        line-height: 1.4;
      }
    }

    .box {
      width: 100%;
      display: flex;
      justify-content: center;
      .left {
        width: 700px !important;
        border-radius: 60px !important;
        align-items: center;
        justify-content: center !important;
        overflow: hidden;
        .leftBody {
          margin: 0 !important;
        }
      }
      .right {
        display: none;
      }
    }
  }
}
</style>
